//
// Tiles
// --------------------------------------------------

.tile {
  background: @console-panel-color;
  padding: 20px;
  .panel_default_boxshadow();
  margin-bottom: 20px;
  word-wrap: break-word;
  // Prevent long, unbroken words from extending outside the tile.
  overflow-x: hidden;
  h1, h2, h3 {
    margin: (@line-height-computed / 2) 0px;
  }
}

.tile-click {
  &:hover {
    .image-icon {
      opacity: .75;
    }
  }
  .image-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 15px;
    opacity: .38;
  }
}

.tile-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
  // Safari bug fix; see http://stackoverflow.com/a/36476586
  &:before {
    display: none;
  }
  [class^="col"] {
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
  }
  .h3 + & {
    margin-top: 20px;
  }
  .tile {
    .box-shadow-hover-transition();
    flex-grow: 1;
    &.tile-sans-description.tile-sans-icon {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    p {
      margin-bottom: 0;
      margin-top: 15px;
    }
  }
  .tile-click:hover {
    .panel_default_boxshadow_hover();
  }
  .tile-item-count {
    background-color: #ccc;
    font-weight: 600;
    padding: 4px 6px;
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .tile-title {
    text-align: center;
    h3 {
      margin: 0 20px;
    }
  }
}
